<template>
	<div class="Word">
		<!-- 定义信息提示条的HTML结构 -->
		<div id="alert-container" class="alert-container"></div>

		<div class="container">
			<div class="left">
				<h5>待添加标签：</h5>
				<input type="text" id="inputKey" oninput="loadData();" placeholder="请输入数据标签关键字搜索" />
				<div class="tbcontainer">
					<table id="tagTable">
						<thead>
						<tr>
							<th>数据标签</th>
							<th style="width: 110px;">操作</th>
						</tr>
						</thead>
						<tbody>
						<!-- 大量的数据行 -->
						<!--<tr>-->
						<!--<td>AAA</td>-->
						<!--<td>BBB</td>-->
						<!--<td><button class="normal-button">添加</button></td>-->
						<!--</tr>-->

						</tbody>
					</table>
				</div>
			</div>

		</div>
	</div>
</template>
<style>
	.Word {
		font-family: Arial, sans-serif;
		font-size:10px;
		margin: 0;
		padding: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		background-color: #f5f5f5;
	}

	.container {
		display: flex;
		width: 99%;
		max-width: 100%;
	}

	.left, .right {
		background-color: #fff;
		padding:0 10px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}
	.left{
		flex-grow: 7;
	}
	.right {
		flex-grow: 3;
	}

	h5 {
		margin-bottom: 10px;
	}

	input[type="text"], textarea {
		width: 90%;
		padding: 10px;
		margin-bottom: 15px;
		border-radius: 5px;
		border: 1px solid #ccc;
	}

	/* 表格样式 */
	table {
		table-layout: fixed;/* 设置表格的布局为固定布局 */
		border-collapse: collapse;
		width: 100%;
	}

	th, td {
		padding: 8px;
		text-align: left;
		border-bottom: 1px solid #ddd;
		white-space: nowrap; /* 强制单元格内文字不换行 */
		overflow: hidden; /* 隐藏超出单元格的文字 */
		/* text-overflow: ellipsis; 显示省略号 */
	}

	th {
		position: sticky;
		top: 0;
		background-color: #f2f2f2;
		z-index: 1;
	}

	/* 容器样式 */
	.tbcontainer {
		height: 300px;
		overflow: auto;
		border: solid 1px #ccc;
		scrollbar-width: thin;
		scrollbar-color: #888 #f2f2f2;
	}

	/* 滚动条样式 */
	.tbcontainer::-webkit-scrollbar {
		width: 8px;
	}

	.tbcontainer::-webkit-scrollbar-track {
		background: #f2f2f2;
	}

	.tbcontainer::-webkit-scrollbar-thumb {
		background-color: #888;
		border-radius: 4px;
	}

	.tbcontainer::-webkit-scrollbar-thumb:hover {
		background-color: #555;
	}
	.delete-button {
		padding: 3px 3px;
		border: none;
		border-radius: 3px;
		background-color: #f44336;
		color: white;
		font-size: 10px;
		cursor: pointer;
	}
	.delete-button:hover {
		background-color: #d32f2f;
	}

	.normal-button {
		padding: 3px 3px;
		border: none;
		border-radius: 3px;
		background-color: #4E7EFF;
		color: white;
		font-size: 10px;
		cursor: pointer;
	}
	.normal-button:hover {
		background-color: #4E6EF2;
	}

	.locate-button {
		padding: 3px 3px;
		border: none;
		border-radius: 3px;
		background-color: #0abb87;
		color: white;
		font-size: 10px;
		cursor: pointer;
	}
	.locate-button:hover {
		background-color: #0a9966;
	}

	/* 定义信息提示条的样式 */
	.alert-container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 9999;
	}

	.alert-bar {
		padding: 10px;
		border-bottom: solid 1px #f8a2a6;
		background-color: #f8d7da;
		color: #721c24;
		font-weight: bold;
		text-align: center;
		margin-bottom: 1px;
		opacity: 1;
		transition: all 0.5s ease;
	}

	.alert-bar.hide {
		opacity: 0;
		transform: translateY(-50px);
	}
</style>
<script>

	let isFromStart = false;
	let lastOpTag = '';
	let definedDataTagJson = window.external.UserParams;
	alert(definedDataTagJson);

	export default{
		name: 'Word',
		data(){
		return {
		}
		},

		methods:{
			//加载数据
			loadData() {
				var kWord = document.getElementById("inputKey").value;
				searchDataTag(definedDataTagJson, kWord);
				return;
			},

			//加载上方数据列表
			searchDataTag(dtDefinedJson, s){
				var tb1 = document.getElementById("tagTable");
				var rCount = tb1.rows.length;
				for (var i = 1; i < rCount; i++) {
					tb1.deleteRow(1);
				}

				if('' == dtDefinedJson) dtDefinedJson = '[]';
				let definedDataTagObj = JSON.parse(dtDefinedJson);

				var oTable = document.getElementById("tagTable");
				var tbodyObj = oTable.tBodies[0];
				for(let key in definedDataTagObj ){
					let dtName = definedDataTagObj[key].name;
					if (dtName.toLocaleLowerCase().indexOf(s.toLocaleLowerCase()) > -1) {
						var oTr = tbodyObj.insertRow();
						var oTd = oTr.insertCell();
						oTd.innerHTML = dtName;
						oTd.title = dtName;
						oTd = oTr.insertCell();
						oTd.innerHTML = '<button class="delete-button" onclick="deleteTag(\''+ dtName +'\')">删除</button> <button class="locate-button" onclick="locateTag(\''+ dtName +'\')" >定位</button> <button class="normal-button" onclick="addTag(\''+ dtName +'\');">添加</button> ';
					}
				}
			},

			addTag(tagName) {
				pageofficectrl.word.SetTextToSelection(tagName);
			},

			locateTag(tagName){
				pageofficectrl.word.SelectionCollapse(0);

				if(isFromStart){
					if(lastOpTag == tagName){
						pageofficectrl.word.HomeKey(6);
					}

					isFromStart = false;
				}

				if(!pageofficectrl.word.FindNextText(tagName)){
					showAlert('已经搜索到文档末尾。');
					isFromStart = true;
				}

				lastOpTag = tagName;
			},

			deleteTag(tagName){
				let selectText = pageofficectrl.word.GetTextFromSelection();
				if(tagName != selectText){
					showAlert('请先执行‘'+tagName+'’的定位操作，然后再删除。');
				}else{
					pageofficectrl.word.SetTextToSelection('');
				}
			},

			// 自定义alert提示条
			showAlert(message) {
				var alertBar = document.createElement('div');
				alertBar.className = 'alert-bar';
				alertBar.textContent = message;

				var alertContainer = document.getElementById('alert-container');
				alertContainer.insertBefore(alertBar, alertContainer.firstChild);
				alertBar.style.animation = 'slideDown 0.5s ease-out';

				setTimeout(function() {
					alertBar.classList.add('hide');
					setTimeout(function() {
						alertContainer.removeChild(alertBar);
					}, 500);
				}, 2000);
			},

		},
		
		mounted: function(){

			// 将vue中的方法赋值给window
			window.loadData = this.loadData;
			window.searchDataTag = this.searchDataTag;
			window.addTag = this.addTag;
			window.locateTag = this.locateTag;
			window.deleteTag = this.deleteTag;
			window.showAlert = this.showAlert;
			//首次加载数据
			
			loadData();
		
		}
	}
</script>

